﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link href="/ViewV5/CSS/bootstrap3.3.5/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_533449_6cz802rnwc9.css" />
    <link rel="stylesheet" href="/ViewV5/CSS/element/index.css">
    <script src="//cdn.polyfill.io/v1/polyfill.min.js" async defer></script>

</head>
<body>
    <div id="app">
        <el-container>
            <el-main>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form :inline="true" :model="formInline" class="demo-form-inline" label-position="top">
                            <el-select v-model="formInline.formtype" placeholder="请选择表单类型" filterable @change="ViewData()" v-if="pdid=='0'">
                                <el-option-group v-for="group in LCLBData"
                                                 :key="group.label"
                                                 :label="group.label">
                                    <el-option v-for="item in group.options"
                                               :key="item.ID"
                                               :label="item.ProcessName"
                                               :value="item.ID">
                                    </el-option>
                                </el-option-group>
                            </el-select>
                            <el-select v-model="isGD" placeholder="请选择归档状态" @change="gdChange">
                                <el-option label="未归档" value="N">
                                </el-option>
                                <el-option label="已归档" value="Y">
                                </el-option>
                            </el-select>
                            <el-date-picker v-model="formInline.sedate"
                                            type="daterange"
                                            align="right"
                                            value-format="yyyy-MM-dd"
                                            unlink-panels
                                            range-separator="至"
                                            start-placeholder="创建开始日期"
                                            end-placeholder="创建结束日期"
                                            :picker-options="pickerOptions2">
                            </el-date-picker>

                            <el-button type="primary" @click="QueryData">查询</el-button>
                            <el-button type="danger" @click="DelPIData" style="float:right">彻底删除</el-button>
                            <el-button type="info" @click="ExportData" style="float:right">导出表单</el-button>
                            <el-button v-show="isGD=='N'" type="primary" @click="GDData" style="float:right">归档</el-button>
                            <el-button v-show="isGD=='Y'" type="warning" @click="QXGDData" style="float:right">取消归档</el-button>


                            <a v-if="ishasadd=='1'" :href='"/ViewV5/AppPage/FORMBI/FormAdd.html?pdid=" + formInline.formtype' target="_blank" class="el-button el-button--primary pull-right">添加</a>
                        </el-form>

                    </el-col>

                </el-row>

                <el-table :data="tabledata" style="width:100%;min-height:300px;margin-top:10px" height="500" class="data-table" @header-dragend="widchange" @row-click="rowclick" @selection-change="handleSelectionChange" stripe border>
                    <el-table-column :label="tabletitle">
                        <el-table-column type="selection"
                                         width="55">
                        </el-table-column>
                        <el-table-column type="index" width="50" fixed> </el-table-column>
                        <el-table-column fixed="right"
                                         label="操作"
                                         width="120">
                            <template slot-scope="scope">
                                <a :href='"/ViewV5/AppPage/FORMBI/FormManage.html?piid=" + scope.row.DataID' target="_blank">查看明细</a>

                            </template>
                        </el-table-column>
                        <el-table-column prop="CRDate" width="180" label="创建时间" fixed> </el-table-column>
                        <el-table-column prop="CRUserName" label="创建人" fixed> </el-table-column>
                        <!--<el-table-column prop="BranchName" label="发起部门" fixed> </el-table-column>-->

                        <el-table-column v-for="col in columdata" :property="col.TableFiledColumn" :key="col.ID" :label="col.TableFiledName" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <span v-if="col.TableFiledColumn.indexOf('qjFile')<0" v-text="scope.row[col.TableFiledColumn]"></span>
                                <div v-if="col.TableFiledColumn.indexOf('qjFile')==0" v-html="filedata(scope.row[col.TableFiledColumn])">

                                </div>
                            </template>
                        </el-table-column>

                    </el-table-column>

                </el-table>
            </el-main>
        </el-container>

    </div>
</body>
<script src="/ViewV5/JS/vue.js"></script>
<script type="text/javascript" src="/ViewV5/JS/jquery-1.11.2.min.js"></script>
<script src="/ViewV5/JS/lodash.min.js"></script>
<script src="/ViewV5/JS/httpVueLoader.js"></script>
<script src="/ViewV5/JS/element/element.js"></script>
<script src="/ViewV5/JS/bijs.js?v=5"></script>

<script>
    var app = new Vue({
        el: '#app',
        components: {
     
        },
        data: function () {
            return {
                pdid: ComFunJS.getQueryString('pdid', '0'),
                ishasadd: ComFunJS.getQueryString('add', '0'),
                FiledData: [],
                isGD: "N",
                formInline: {
                    formtype: "", sedate: [ComFunJS.getnowdate("yyyy") + "-01-01", ComFunJS.getnowdate("yyyy-mm-dd")], pzoption: { placeholder: "请选择统计部门" }
                },
                tabletitle: "表单列表(只显示顺利完成流程的表单)",
                columdata: [],
                tabledata: [],
                LCLBData: [],
                multipleSelection: [],
                pickerOptions2: {
                    shortcuts: [{
                        text: '最近一周',
                        onClick: function (picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近一个月',
                        onClick: function (picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近三个月',
                        onClick: function (picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                fileList: []
            }
        },
        computed: {

            filedata () {
                return function (val) {
                    /** do something */
                    if (val) {
                        var filejson = JSON.parse(val);
                        var html = "";
                        _.forEach(filejson, function (file) {
                            html = html + "<a href='" + ComFunJS.getfileurl(file.response.split(',')[0]) + "'>" + file.name + "</a>";
                        })
                        return html;
                    } else {
                        return "";
                    }
                }
            }

        },
        methods: {
            rowclick: function (row, event, column) {
            },
            widchange: function (newWidth, oldWidth, column, event) {
                debugger
                console.debug(newWidth)
                console.debug(column)

            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            gdChange: function () {
                this.ViewData();
            },
            GDData: function () {
                var gdids = _.map(this.multipleSelection, 'DataID');
                if (gdids) {
                    $.getJSON('/api/Bll/ExeAction?Action=FORMBI_GDFORM', { P1: gdids.join(','), P2: "Y" }, function (resultData) {
                        if (!resultData.ErrorMsg) {
                            app.$notify({
                                title: '成功',
                                message: "归档成功",
                                type: 'success'
                            });
                            app.ViewData();
                        }
                    })
                }
            },
            QXGDData: function () {
                var gdids = _.map(this.multipleSelection, 'DataID');
                if (gdids) {
                    $.getJSON('/api/Bll/ExeAction?Action=FORMBI_GDFORM', { P1: gdids.join(','), P2: "N" }, function (resultData) {
                        if (!resultData.ErrorMsg) {
                            app.$notify({
                                title: '成功',
                                message: "归档成功",
                                type: 'success'
                            });
                            app.ViewData();

                        }
                    })
                }
            },
            DelPIData: function () {
                this.$confirm('此操作将会彻底删除表单的相关信息,你确定要进行此操作?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var gdids = _.map(this.multipleSelection, 'DataID');
                    if (gdids.length > 0) {
                        $.getJSON('/api/Bll/ExeAction?Action=FORMBI_DELFORM', { P1: gdids.join(',') }, function (resultData) {
                            if (!resultData.ErrorMsg) {
                                app.$notify({
                                    title: '成功',
                                    message: "删除成功",
                                    type: 'success'
                                });
                                app.ViewData();

                            }
                        })
                    }
                }).catch(() => {

                });

            },
            QueryData: function () {
                this.ViewData();
            },
            ExportData: function () {
                if (app.tabledata.length > 0) {
                    location.href = "/api/Bll/EXPORTBDTJDATA?P1=" + app.formInline.formtype + "&sdate=" + app.formInline.sedate[0] + "&edate=" + app.formInline.sedate[1];
                }
                else {
                    app.$notify({
                        title: '警告',
                        message: "无数据",
                        type: 'warning'
                    });
                }

            },
            ViewData: function () {
                $.getJSON('/api/Bll/ExeAction?Action=FORMBI_GETBDTJDATA', { P1: app.formInline.formtype, isGD: app.isGD, sdate: app.formInline.sedate[0], edate: app.formInline.sedate[1] }, function (resultData) {
                    if (resultData.ErrorMsg == "") {
                        app.tabledata = resultData.Result;
                        app.columdata = resultData.Result1;
                        app.tabletitle = "共计找到" + app.tabledata.length + "条记录";

                    }
                })
            },

        },
        mounted: function () {
            var pro = this;
            pro.$nextTick(function () {
                //获取表单类型
                $.getJSON('/api/Bll/ExeAction?Action=FORMBI_GETWFPDLIST', { P1: 1 }, function (resultData) {
                    if (resultData.ErrorMsg == "") {
                        var tempdata = [];
                        for (var i = 0; i < resultData.Result.length; i++) {
                            var tempname = resultData.Result[i].ProcessClass;
                            if (_.findIndex(tempdata, { "label": tempname }) == -1) {
                                tempdata.push({ "label": tempname, options: _.filter(resultData.Result, { 'ProcessClass': tempname }) })
                            }
                        }
                        app.LCLBData = tempdata;
                    }
                })
                if (app.pdid != '0') {
                    app.formInline.formtype = app.pdid;
                    this.ViewData();
                }
                // pro.InitForm();
            })
        }
    })
</script>
</html>
